<!DOCTYPE html>
<html lang="en">

<head>
    <!-- #include file="com/link.asp" -->
</head>

<body>
    <!-- #include file="com/header.asp" -->
    <input class='hiddenVal' type="hidden" name="" value="7">

    <div class="mainBox crumbsMain flexs flexsBet">
        <div class="crumbs">
            <img src="./images/icon17.png" alt="">
            <a href="/">首页</a><span>></span>
            <a href="imgList.asp">图片中心</a><span>></span>
            <a href="javascript:;">图片详情</a>
        </div>
    </div>

    <div class="videoDetMain">
        <div class="mainBox">
            <h1>回顾2019</h1>
            <!-- Swiper -->
            <div class="imgBan">
                <div class="swiper-container gallery-top">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide list">
                            <div class="img">
                                <img src="./images/1.png" alt="">
                            </div>
                            <p>以“预见新物种”为主题的“一带一路”合作创新产品展，将以沉浸式体验互动的场景化呈现，展示“一带一路”沿线国家的创新产品、生活方式、商业模式、科技趋势等与生产生活相关的内容。
                                宁夏日报记者 李 徽 王晓龙 党 硕 文/图</p>
                        </div>
                        <div class="swiper-slide list">
                            <div class="img">
                                <img src="./images/1.png" alt="">
                            </div>
                            <p>以“预见新物种”为主题的“一带一路”合作创新产品展，将以沉浸式体验互动的场景化呈现，展示“一带一路”沿线国家的创新产品、生活方式、商业模式、科技趋势等与生产生活相关的内容。
                                宁夏日报记者 李 徽 王晓龙 党 硕 文/图</p>
                        </div>
                        <div class="swiper-slide list">
                            <div class="img">
                                <img src="./images/1.png" alt="">
                            </div>
                            <p>以“预见新物种”为主题的“一带一路”合作创新产品展，将以沉浸式体验互动的场景化呈现，展示“一带一路”沿线国家的创新产品、生活方式、商业模式、科技趋势等与生产生活相关的内容。
                                宁夏日报记者 李 徽 王晓龙 党 硕 文/图</p>
                        </div>
                    </div>
                </div>
                <!-- Add Arrows -->
                <div class="swiper-button-next next"></div>
                <div class="swiper-button-prev prev"></div>
            </div>
            <div class="imgBanThumbs">
                <div class="swiper-container gallery-thumbs">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide isList">
                            <img src="./images/1.png" alt="">
                        </div>
                        <div class="swiper-slide isList">
                            <img src="./images/1.png" alt="">
                        </div>
                        <div class="swiper-slide isList">
                            <img src="./images/1.png" alt="">
                        </div>
                    </div>
                </div>
                <div class="swiper-button-next thumbsNext"></div>
                <div class="swiper-button-prev thumbsPrev"></div>
            </div>
        </div>
    </div>

    <!-- #include file="com/footer.asp" -->
</body>

<script>
    var galleryThumbs = new Swiper('.gallery-thumbs', {
        spaceBetween: 10,
        slidesPerView: 5,
        freeMode: true,
        watchSlidesVisibility: true,
        watchSlidesProgress: true,
        navigation: {
            nextEl: '.thumbsNext',
            prevEl: '.thumbsPrev',
        },
        breakpoints: {
            320: {  //当屏幕宽度大于等于320
                slidesPerView: 2,
            },
            768: {  //当屏幕宽度大于等于768 
                slidesPerView: 3,
            },
            1204: {  //当屏幕宽度大于等于768 
                slidesPerView: 5,
            },
        }
    });

    var galleryTop = new Swiper('.gallery-top', {
        spaceBetween: 10,
        navigation: {
            nextEl: '.next',
            prevEl: '.prev',
        },
        thumbs: {
            swiper: galleryThumbs
        }
    });
</script>

</html>